<template>
  <div>
    <el-drawer
      v-model="props.productDrawer"
      title="商品分组"
      :before-close="handleProductVisibleClose"
      size="50%"
    >
      <el-button type="primary" @click="addList">新增商品分组</el-button>

      <div v-for="(item, index) in productModuleList" :key="index">
        <div class="group-item">
          <el-text>分组名：{{ item.groupName }}</el-text>
          <div>
            <el-button type="primary" @click="editGroup(item)"
              >编辑商品分组</el-button
            >
            <el-button type="primary" @click="addProductList(item)"
              >编辑商品</el-button
            >
            <el-button type="danger" @click="deleteModuleProduct(item)"
              >删除</el-button
            >
          </div>
        </div>

        <el-table :data="item.productLines" height="300px">
          <el-table-column prop="id" label="ID" align="center" width="50" />
          <el-table-column label="商品图" align="center" width="100">
            <template #default="scope">
              <ImagePreview :src="scope.row.host" :width="50" :height="50" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名" />
          <el-table-column
            prop="categoryName"
            label="商品分类"
            align="center"
          />
          <el-table-column
            prop="productDiscountPrice"
            label="划线价"
            align="center"
          />
          <el-table-column prop="productPrice" label="销售价" align="center" />
        </el-table>
      </div>
      <AddWebProduct
        :listItem="publicItem"
        :productVisible="productVisible"
        :websiteId="proxy.websiteId"
        @handleProductClose="handleProductClose"
        @handleProductSure="handleProductSure"
      ></AddWebProduct>
      <el-dialog
        v-model="groupVisible"
        title="新增商品分组"
        width="600"
        :before-close="handleClose"
      >
        <el-form :model="productGroup">
          <el-form-item prop="titleGroups">
            <MoreLanguage
              :newList="productGroup.titleGroups"
              label="主标题"
              :showControls="true"
            ></MoreLanguage>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleGroup"> 确定 </el-button>
        </template>
      </el-dialog>
    </el-drawer>
  </div>
</template>
  <script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
import AddWebProduct from "../components/AddWebProduct.vue";
const emits = defineEmits(["handleProductVisibleClose"]);
const { proxy } = getCurrentInstance();
const publicItem = ref({}); //公共赋值对象参数
const productVisible = ref(false);
const groupVisible = ref(false); //弹框新增商品分组
const tableData = ref([]);
const productModuleList = ref([]);
const moduleProductType = ref(0); //区分商品分组模块新增和编辑
const moduleNameProduct = ref(""); //模块名称编辑的时候需要用到

const brandFrom = ref({});
const productGroup = ref({
  moduleId: null,
  titleGroups: [
    // languageId:null,
    // name:'',
  ],
}); //商品分组添加参数
const props = defineProps({
  productDrawer: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  listItem: {
    type: Object,
    default: {},
  },
  websiteId: {
    type: String || Number,
    default: "",
  },
});
const groupFrom = ref({
  pageNu: 1,
  pageSize: 999,
  param: {
    websiteId: Number(props.websiteId), //网站id
    moduleId: null, //模块id
    moduleType: "Product",
  },
}); //商品分组参数
watch(
  () => props.productDrawer,
  () => {
    if (!props.productDrawer) return;
    getList();
  }
);
const getList = () => {
  groupFrom.value.param.moduleId = props.listItem.id;
  site.moduleline
    .sitewebsitemodulelineGetproductlist({
      data: groupFrom.value,
    })
    .then((res) => {
      productModuleList.value = res.data;
    });
};
// 添加商品分组模块列表
const handleGroup = () => {
  if (!proxy.publicArray(productGroup.value.titleGroups))
    return proxy.$modal.msgError("请完整填写多语言");
  productGroup.value.moduleId = props.listItem.id;

  if (moduleProductType.value) {
    // 编辑
    site.module
      .sitewebsitemoduleUpdate({
        pathParams: {
          id: moduleProductType.value,
        },
        data: {
          moduleName: moduleNameProduct.value,
          websiteId: Number(props.websiteId),
          seq: 0,
          status: 1,
          descriptions: productGroup.value.titleGroups,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          handleClose();
          getList();
          proxy.$modal.msgSuccess("修改成功");
        }
      });
  } else {
    // 新增
    site.moduleline
      .sitewebsitemodulelineAdd({
        data: productGroup.value,
      })
      .then((res) => {
        if (res.code === 200) {
          handleClose();
          getList();
          proxy.$modal.msgSuccess("添加成功");
        }
      });
  }
};

// 取消模块
const handleClose = () => {
  groupVisible.value = false;
  productGroup.value.titleGroups = [];
};
// 获取基础信息
const getBasics = () => {
  site.general
    .sitewebsiteGetbyid({
      pathParams: {
        id: Number(props.websiteId),
      },
    })
    .then((res) => {
      productGroup.value.titleGroups = [];
      if (res.data.languageIds.length) {
        res.data.languageIds.forEach((e) => {
          productGroup.value.titleGroups.push({
            languageId: e,
            name: "",
          });
        });
      }
    });
};
// 新增商品分组模块
const addList = () => {
  // productVisible.value = true;
  groupVisible.value = true;
  getBasics();
  moduleProductType.value = 0; //区分商品分组模块新增和编辑
};
// 编辑商品分组模块
const editGroup = (item) => {
  site.module
    .sitewebsitemoduleGetbyid({
      pathParams: {
        id: item.groupModuleId,
      },
    })
    .then((res) => {
      moduleNameProduct.value = res.data.moduleName;
      productGroup.value.titleGroups = [];
      res.data.descriptions.forEach((e) => {
        productGroup.value.titleGroups.push({
          languageId: e.languageId,
          name: e.name,
        });
      });
      groupVisible.value = true;
      moduleProductType.value = item.groupModuleId;
    });
};
const deleteModuleProduct = (row) => {
  var newArray = [];
  newArray.push(row.groupModuleId);
  proxy.$modal.confirm("是否确认删除此数据项？").then(() => {
    site.module
      .sitewebsitemoduleDeletebatch({
        data: {
          ids: newArray,
          moduleId: props.listItem.id,
        },
      })
      .then((res) => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      });
  });
};
//   添加商品数据的列表的确定取消
const addProductList = (row) => {
  console.log(row,'有问题');
  let newIndex = 0;
  row = {
    ...row,
    newIndex: (newIndex += 1),
  };
  publicItem.value = row;
  productVisible.value = true;
};
const handleProductClose = () => {
  productVisible.value = false;
};
const handleProductSure = () => {
  getList();
  productVisible.value = false;
};
//   确定取消大盒子
const handleProductVisibleClose = () => {
  emits("handleProductVisibleClose");
};
</script>
  <style lang="scss" scoped>
.full-width {
  width: 148px;
}
.group-item {
  display: flex;
  justify-content: space-between;
}
</style>